
var txtItem = document.querySelector("#txtItem");
//声明一个变量，接收到html中文本域；
var txtNum = document.querySelector("#txtNum");
//声明一个变量，接收到html中的提示语；
//提示语为“还能输入多少个字”;


//文本域的函数，onkeyup指的是当按键弹起的时候；
//在文本域内，每次按键弹起调用一次函数；
txtItem.onkeyup = function(){
	var long = txtItem.value.length;
	//声明一个变量，接收到文本域内容的长度;
	txtNum.innerText = "还能输入" + (150 - long) + "个字";
	//提示语随着每次函数的调用，字符串的内容跟着变化；
	if(long >= 150){
		//判断，当超过指定字数后，提示语的变化；
		txtNum.innerText = "已经超过" + (long - 150) + "个字";
		
	}
}

var aImg = document.getElementsByTagName("img");
//声明一个变量，获取到html中所有img的标签；

//使用for循环来分别将鼠标移入状态、鼠标移出状态、鼠标点击状态时改变相应的img标签的类名；
for (i = 0; i < aImg.length; i++) {
	aImg[i].onmouseover = function() {
		this.className += " hover"
	};
	aImg[i].onmouseout = function() {
		this.className = this.className.replace(/\s?hover/, "")
	};
	aImg[i].onclick = function() {
		for (i = 0; i < aImg.length; i++) 
			aImg[i].className = "";
			this.className = "current";
		}
}




var ulItem = document.getElementById("ulItem");
//声明一个变量，接收到html中的ul；
var btn = document.getElementById("btn");
//声明一个变量，接收到html中的广播按钮；
var txtName = document.getElementById("txtName");
//声明一个变量，接收到html中的用户名输入框；
var a = 0;
//声明一个变量，赋值变量内容为0；
btn.onclick = function(){
	//广播按钮的点击事件；
	//当点击广播按钮时，触发函数；
	
	//下列为if判断语句
	//判断用户名输入框的内容不能为空格、纯数字且长度不能超过八个字符，文本域的长度不能超过150；
	//如果判断条件都满足，执行if内的指令，如果判断条件都不满足（意为输入的内容都合格）则跳过if语句，执行函数内容；
	if(txtName.value.trim() == ""){
		alert("用户名不可为空");
		return;
	}else if(!isNaN(txtName.value)){
		alert("用户名格式不正确");
		return; 
	}else if(txtName.value.length > 8){
		alert("用户名长度不可超过八个字符");
		return;
	}else if(long >150){
		alert("你是不是个话痨？！！！");
		return;
	}
	var nameTxt = txtName.value;
	//声明一个变量，接收用户名输入框的内容；

	var txtitem = txtItem.value;
	//声明一个变量，接收文本域的内容；
	
	var localTime = new Date();
	//声明一个变量，获取到当前的时间；
	
	var currentImage = document.querySelector(".current");
	//声明一个变量，获取到html中第一个类名为current的图片；
	//在上面的for循环中，已将点击到的img类名改为current；
	
	
	//字符串拼接，将所有内容以字符串的形式添加进ul中；
	//字符串中的a为变量，将每一次调用函数后添加的字符串内标签的id值区分开；
	ulItem.innerHTML = "<li id='li"+ a + "'><div class='faceDiv'> " + "<img src='" + currentImage.src + "'>" + "</div><div class='right'><p class='say'>" + "<a href=''>" + nameTxt + "：" + "</a>" +  txtitem + "<span onclick='delLi(" + a + ")'>删除</span></p><p class='time'>" + localTime.toLocaleTimeString() + "</p></div></li>" + ulItem.innerHTML;
	//每调用一次函数，a的值+1；
	a++;
	
	 // "<img src='" + currentImage.src + "'>"
	  //字符串中的img标签地址为选中的img标签的地址；
	// localTime.toLocaleTimeString()
	  //将获取到的时间值转换格式为本地时间；
}

//点击删除时执行的函数；
//id为形式参数，没有具体数值；
function delLi(id){
	 // "<span onclick='delLi(" + a + ")'>删除</span>
	 //上述字符串中，点击事件中应填入的实际参数为一个变量；
	document.getElementById("li" + id).remove();
	//页面中，ID为点击事件所处的li标签，删除；（直译）
	//删除页面中ID为点击事件所处的li标签；
}

